<template>
  <div class="switch-venue-wrap">
    <div class="switch-venue-bd bacFFF">
      <div class="m-switch-venue">
        <div class="m-switch-venue-tip">请选择其中的一个馆进入</div>
        <!-- 品牌场馆列表 -->
        <div class="m-switch-venue-box">
          <div class="m-switch-venue-con">
            <div class="login-venue-name">
              <div class="venue-img">
                <el-image :src="avatar" class="wh100 borRad50 mar-right10" />
              </div>
              <div class="foSi14" style="flex: 1;">
                <span>{{ brand_name }}</span>
              </div>
              <button v-if="is_super == 1" type="button" class="brand-manage cuPo" data-index="0" @click.stop="cgClick()">品牌管理</button>
            </div>
            <div class="wid100 dis disAl flwa " style="list-style: none;"  v-loading="loading">
              <div
                v-for="(item, index) in list"
                :key="index"
                class="blocks-common cuPo foSi14 dis disAl disJuC"
                @click.stop="venueClick(item)"
              >{{ item.name }}</div>
            </div>
          </div>
        </div>
        <!-- /品牌场馆列表 -->
      </div>
      <div class="switch-venue__exit">有问题?点我<span class="reset-login-status" @click.stop="logout">重新登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { getbrand } from '@/api/brand'
import {
  mapGetters
} from 'vuex'
import { dbiglogin,getInfoBrand } from '@/api/user'
export default {
  name: 'SwitchVenue',
  components: {},
  data() {
    return {
      list: [
        // { name: '麦地分校', id: 1 }
      ],
      loading:false,
      url: ''
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'avatar',
      'is_super',
      'brand_name',
      'redirect'
    ])
  },
  created() {
    var that = this
    that.getbrandlist() // 查询场馆列表
    try {
      this.permission_routes.forEach(item1 => {
        const tmp1 = {
          ...item1
        }
        if (!tmp1.hidden) {
          try {
            tmp1.children.forEach(item2 => {
              const tmp2 = {
                ...item2
              }
              if (!tmp2.hidden) {
                that.url = tmp1.path === '/' ? tmp1.path + tmp2.path : tmp1.path + '/' + tmp2.path
                throw new Error() // 抛出异常
              }
            })
          } finally {}
        }
      })
    } catch (e) {}
    console.log(that.url)
    var data = localStorage.getItem('loginuser')
    data = JSON.parse(data)
    dbiglogin(data).then(response => {
      const {
        data
      } = response
      // this.$router.push({
      //   path: '/switchVenue'
      // })
    }).catch(error => {
      console.log(error)
      this.loading = false
    })
  },
  methods: {
    getbrandlist() {
      console.log('获取场馆列表')
      this.loading = true
      getbrand({}).then(response => {
        const {
          data
        } = response
        this.list = data
        this.loading = false
        console.log(data)
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    cgClick() {
      localStorage.setItem('cg', 1)
      var value = { name: '', id: 0 }
      localStorage.setItem('venue', JSON.stringify(value))
      this.$router.push({
        path: '/brandManage2/brandManage2'
      })
    },
    async venueClick(item) {
      var value = { name: item.name, id: item.id }
      localStorage.setItem('cg', 0)
      localStorage.setItem('venue', JSON.stringify(value))
      console.log(this.url)
      await this.getInfoBrand(item.id)
      this.$router.push({
        path: this.url
      })
    },
    async getInfoBrand(id){
      getInfoBrand({ 'id':id,'is_super': this.is_super}).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.$store.dispatch('permission/generateRoutes', data.auth_list)
      }).catch(error => {
        console.log(error)
      })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    }
  }
}
</script>

<style lang="scss" scoped>
	.switch-venue-wrap {
		position: relative;
		height: 100vh;
		min-height: 760px;
		background: #FFF8F1;
	}

	.switch-venue-bd {
		position: absolute;
		width: 760px;
		padding: 50px;
		left: 50%;
		top: 50%;
		min-height: 600px;
		margin-left: -380px;
		transform: translateY(-50%);
		box-shadow: 0 7px 20px 0 rgba(5, 5, 5, .08);
		border-radius: 10px;
		box-sizing: border-box;
	}
	.m-switch-venue-tip {
	    font-size: 24px;
	    font-weight: 700;
	    text-align: center;
	}
	.m-switch-venue-box {
	    padding: 60px 0 0;
	}
	.m-switch-venue-con {
	    margin-bottom: 40px;
	}
	.login-venue-name {
	    display: flex;
	    align-items: center;
	    margin-bottom: 24px;
	    padding-right: 20px;
	}
	.brand-manage {
	    width: 80px;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
	    font-size: 14px;
	    background: #f77f00;
	    border-radius: 20px;
	    color: #fff;
	}
	button {
	    border: 0;
	}
	.venue-name {
	    position: absolute;
	    width: 100%;
	    left: 50%;
	    top: 50%;
	    -webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
	    box-sizing: border-box;
	    padding: 0 15px;
	    line-height: 1.6;
	    word-wrap: break-word;
	}
	.venue-img {
	    width: 60px;
	    height: 60px;
	    margin-right: 16px;
	    overflow: hidden;
	    background-size: contain;
	}
	.blocks-common {
	    width: 204px;
	    height: 48px;
	    background: #fff;
	    border-radius: 4px;
	    border: 1px solid;
	    color: #f77f00;
		margin: 0 20px 20px 0;
	}
	.blocks-common:nth-child(3n+1){
		margin:  0 0 20px 0 ;
	}
	.switch-venue__exit {
		font-size: 14px;
	    position: absolute;
	    left: 0;
	    right: 0;
	    bottom: 20px;
	    text-align: center;
	    color: #bbb;
	}
	.reset-login-status {
	    color: #f77f00;
	    cursor: pointer;
	}
</style>
